<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>区域设置</title>
    <link rel="stylesheet" href="/resources/css/formSelects-v4.css"/>
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
    <script rel="stylesheet" src="/resources/layui/layui.js"></script>
    <script rel="stylesheet" src="/resources/js/jquery.min.js"></script>
    <script src="/resources/js/function/Local.js"></script>
</head>
<body>
<form class="layui-form" id="formone" action="">
    <div class="layui-inline">
        <label class="layui-form-label">城市简码</label>
        <div class="layui-input-inline">
            <input type="text" name="name" id="jianma" placeholder="请输入城市简码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <button type="button" class="layui-btn" onclick="getin()" lay-submit="" lay-filter="demo1">查询</button>
</form>
<table id="demo" lay-filter="test"></table>
</body>
</html>
<script>
    var table,form,layer,laytpl;
    function getin(){
        //执行重载
        table.reload('demo', {
            page: {
                curr: 1 //重新从第 1 页开始
            }
            ,where: {
                bianma : $("#jianma").val()
            }
        });
    }
    layui.config({
        base: '/resources/js/'
    }).extend({
        formSelects: 'formSelects-v4'
    });
    layui.use(['table','form','formSelects','laytpl','layer'], function(){
        table = layui.table;
        form=layui.form;
        layer=layui.layer;
        laytpl=layui.laytpl;
        //第一个实例
        table.render({
            elem: '#demo'
            ,url: new Local().base_url+'/qvyv/show' //数据接口
            ,page: true //开启分页
            ,even : true
            ,toolbar:"#toolbarDemo"
            ,id : "demo"
            ,cols: [[ //表头
                {field:'id',type:'checkbox'}
                ,{field: 'id', title: 'ID'}
                ,{field: 'sheng', title: '省'}
                ,{field: 'shi', title: '市'}
                ,{field:'qv',title:'区'}
                ,{field:'youbian',title:'邮编'}
                ,{field:'jianma',title:'简码'}
                ,{field:'bianma',title:'城市编码'}
                ,{title:'操作',toolbar: '#barDemo'}
            ]]
        });

        table.on('tool(test)',function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            switch(layEvent){
                case "edit":
                    $.get('addqvyv.html',function (s) {
                        //parent
                        layer.open({
                            type : 1,
                            title : '修改区域',
                            anim: 2,
                            area:'70%',
                            content:s,
                            btn : ['确定','取消'],
                            success:function(){
                                $("#id").val(data.id);
                                $("#sheng").val(data.sheng);
                                $("#shi").val(data.shi);
                                $("#qv").val(data.qv);
                                $("#youbian").val(data.youbian);
                                $("#jma").val(data.jianma);
                                $("#bianma").val(data.bianma);
                                form.render();
                            }
                            ,yes:function(){
                                var str = $("#form").serialize();
                                $.post(new Local().base_url+"/qvyv/update",str,function(data){
                                    layer.close(layer.index);
                                    table.reload('demo');
                                    layer.msg("修改区域成功!");
                                });
                            }
                        });
                    });
                    break;
                case "list":
                    $.get('addqvyv.html',function (s) {
                        //parent
                        layer.open({
                            type : 1,
                            title : '查看区域详细',
                            anim: 2,
                            area:'70%',
                            content:s,
                            btn : ['确定','取消'],
                            success:function(){
                                $("#id").val(data.id).attr("readonly");
                                $("#sheng").val(data.sheng).attr("readonly",true);
                                $("#shi").val(data.shi).attr("readonly",true);
                                $("#qv").val(data.qv).attr("readonly",true);
                                $("#youbian").val(data.youbian).attr("readonly",true);
                                $("#jma").val(data.jianma).attr("readonly",true);
                                $("#bianma").val(data.bianma).attr("readonly",true);
                                form.render();
                            }
                            ,yes:function(){
                                layer.close(layer.index);
                                layer.msg("如有错误可修改!");
                            }
                        });
                    });
                    break;
            }
        });
        table.on('toolbar(test)', function(obj) {
            switch (obj.event) {
                case 'add':
                    $.get('addqvyv.html',function (s) {
                        //parent
                        layer.open({
                            type : 1,
                            title : '添加区域',
                            anim: 2,
                            area:'70%',
                            content:s,
                            btn : ['确定','取消'],
                            success:function(){
                                form.render();
                            }
                            ,yes:function(){
                                var str = $("#form").serialize();
                                $.post(new Local().base_url+"/qvyv/add",str,function(data){
                                    layer.close(layer.index);
                                    table.reload('demo');
                                    layer.msg("添加区域成功!");
                                });
                            }
                        });
                    });
                    break;
            }
        });

    });
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle"></i> 添加</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a href="javascript:void(0)" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
    <a href="javascript:void(0)" lay-event="list"><i class="layui-icon layui-icon-list"></i></a>
</script>